<template>
  <div class="transactions">
    <div class="header-mine-search">
      <div class="header-mine-search__line">
        <div class="header-mine-search__list">
        </div>
      </div>
      <div class="header-mine-search__line">
        <div class="header-mine-search__list">
          <div class="search__list-label">{{t("Rebate.TimeLimit")}}：</div>
          <div class="search__list-wrapper" >
            <el-date-picker
              v-model="form.date"
              type="daterange"
              unlink-panels
              range-separator="-"
              :start-placeholder="t('lang.el.datepicker.startDate')"
              :end-placeholder="t('lang.el.datepicker.endDate')"
              :shortcuts="shortcuts"
              value-format="YYYY-MM-DD"
              size="large"
            />
          </div>
          <div class="search__list-label">{{t("Rebate.Currency")}}：</div>
          <div class="search__list-wrapper small-wrapper">
            <el-select v-model="form.currencyId" clearable size="small">
              <el-option
                v-for="item in piniaUserinfo.getWallet"
                :key="item.currencyId"
                :label="item.currencyName"
                :value="item.currencyId"
              />
            </el-select>
          </div>
          <div class="search__list-label">{{t("Rebate.State")}}：</div>
          <div class="search__list-wrapper small-wrapper">
            <el-select v-model="form.status" clearable size="small">
              <el-option
                v-for="item in getEnumOptions('memberRebateStatus')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="header-mine-search__list">
          <el-button type="primary" class="header-mine-search__btns member-rebate-search" @click="backWaterReceiveList" :loading="btnLoading">{{t("BetRecord.Search")}}</el-button>
        </div>
      </div>
    </div>
    <div class="dialog-content">
      <div class="dialog-content-box">
        <div class="dialog-content-wrapper">
          <el-table :data="memberRebate" height="100%" class="record-table" :empty-text="t('BetRecord.Nocontent')">
            <el-table-column align="center" :label="t('Rebate.RebateDate')" width="180">
              <template #default="{row}">
                {{ parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="currencyName" :label="t('Rebate.Currency')"/>
            <el-table-column align="center" prop="orderId" :label="t('Rebate.BetAmount')">
              <template #default="{row}">
                {{ Number(row.betMoney).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="orderId" :label="t('Rebate.ValidBet')">
              <template #default="{row}">
                {{ Number(row.codingQuantity).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="orderId" :label="t('Rebate.RebateAmount')">
              <template #default="{row}">
                {{ Number(row.backWaterMoney).toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="codingMultiple" :label="t('Rebate.FlowMultiple')"/>
            <el-table-column align="center" prop="orderId" :label="t('Rebate.ReceivingStatus')">
              <template #default="{row}">
                {{ t(getEnumValue('memberRebateStatus', row.receiveStatus)) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="record-pagination" v-if="memberRebate.length !== 0">
      <ZPagination
        v-model:pagination="pagination"
        :query="backWaterReceiveList"
      />
    </div>
    <div class="member-rebate-footer-btn">
      <el-button type="primary" v-if="unclaimed.length > 0" class="header-mine-search__btns member-rebate-search" @click="handleGetRebate" :loading="rewardLoading" :disabled="unclaimed.length == 0">{{t("Rebate.reward")}}</el-button>
    </div>
  </div>
</template>

<script setup lang="ts" name="MemberRebate">
import userinfo from '@/store/userinfo';
import vipApi from '@/api/modules/vip';
import { parseTime } from '@/utils/format';
import { getEnumValue, getEnumOptions } from '@/utils/enums';

const piniaUserinfo:any = userinfo();

const { t } = useI18n();
const data:any = reactive({
  form: {
    date: [
      parseTime(new Date(), '{y}:{m}:{d}'),
      parseTime(new Date(), '{y}:{m}:{d}')
    ],
    status: '',
    currencyId: piniaUserinfo.getCurrentWallet.currencyId
  },
  options: [],
  memberRebate: [], // 会员返水
  unclaimed: [], // 待领取
  pagination: {
    total: 0,
    pageSize: 10,
    pageNum: 1
  },
  btnLoading: false,
  rewardLoading: false,
});

const {
  form,
  options,
  memberRebate,
  unclaimed,
  pagination,
  btnLoading,
  rewardLoading,
} = toRefs(data);

const shortcuts = [
  {
    text: t('lang.el.datepicker.lastweek'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: t('lang.el.datepicker.prevMonth'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: t('lang.el.datepicker.prevMonth3'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const backWaterReceiveList = () => {
  btnLoading.value = true;
  vipApi.backWaterReceiveList({
    currencyId: form.value.currencyId,
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
    startDate: form.value.date[0] + ' 00:00:00',
    endDate: form.value.date[1] + ' 23:59:59',
    receiveStatus: form.value.status,
    userId: piniaUserinfo.getUserinfo.user.id
  }).then((response:any)=>{
    console.log("会员返水", response)
    if(response.code === 200){
      memberRebate.value = response.rows;
      unclaimed.value = memberRebate.value.filter((im:any)=>im.receiveStatus == 0);
      pagination.value.total = response.total;
    }
  }).finally(()=>{
    btnLoading.value = false;
  });
}
backWaterReceiveList();


const handleGetRebate = () => {
  rewardLoading.value = true;
  vipApi.receiveBackWater({
    userId: piniaUserinfo.getUserinfo.user.id,
    backWaterReceiveIds: unclaimed.value.map((im:any)=>im.id).join(',')
  }).then((response:any) => {
    if (response.code == 200) {
      backWaterReceiveList();
    }
  }).finally(()=>{
    rewardLoading.value = true;
  })
}
</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
